<!-- <template>

  <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :limit="1"
            :http-request="handleUploadOk"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
            </template>
  </el-upload>

</template>
<script setup >
import { put, getFileNameUUID } from '@/util/alioss';
import { ref } from 'vue';

const fileList = ref([]);
const handleUploadOk = async (option:any) => {
  console.log('点击上传要得到的内容', option);
  // 我们无论是使用什么ui框架 上传的流程当中只要能获取到 文件的file对象就可以完成自定义的上传
  // 生成的文件名称
  // 电竞平台.png => split => [电竞平台, png] => pop => png
  const objName = [getFileNameUUID(), option.file.name.split('.').pop()].join('.');

  // 调用 ali-oss 中的方法  put(文件名, 文件对象)
  const res = await put(`${objName}`, option.file);
  console.log('上传的结果', res);
  // 对于elemetui或者是plus 自定义上传成功之后需要正确的填充上传的结果到 fileList
  // 这里需要手动的通过 Promise.resolve来返回请求的结果 这个结果会自动的加载到
  return Promise.resolve({
    name: objName,
    url: `http://tp.luzx.top/${objName}`,
  });
};

</script> -->